<template>
    <transition
            name="battle-logs-wrapper-animate"
    >
        <div
                class="log-wrapper x-grid"
                v-if="logs.length"
        >
            <transition-group
                    class="log-panel small-12 cell log-list"
                    name="log-animate"
                    tag="ul"
            >
                <li
                        class="text-center log-animate-item"
                        v-for="(log,index) in logs"
                        :key="logs.length - index"
                        :class="[log.isPlayer?'player-log':'monster-log']"
                >
                    {{log.message}}
                </li>
            </transition-group>
        </div>
    </transition>
</template>

<script>
export default {
  name: "battle-logs",
  props: ["logs"]
}
</script>

<style lang="less" scoped>
    .battle-logs-wrapper-animate-enter-active,
    .battle-logs-wrapper-animate-leave-active {
        transition: all .5s ease;
    }

    .battle-logs-wrapper-animate-enter,
    .battle-logs-wrapper-animate-leave-to {
        opacity: 0;
        transform: translateY(-30px);
    }

    .log-wrapper {
        width: 80%;
        margin: 50px auto;
        border: 2px solid rgba(128, 128, 128, 0.5);
        border-radius: 10px;
        padding: 10px;
        .log-list {
            margin: 0;
            border-radius: 10px;
            overflow: hidden;
            li {
                font-weight: bold;
                &.player-log {
                    background: greenyellow;
                }
                &.monster-log {
                    background: rgba(226, 128, 128, 0.952);
                }
                &.log-animate-item {
                    transition: all .5s ease;
                }
                &.log-animate-enter,
                &.log-animate-leave-to {
                    opacity: 0;
                    transform: translateY(-30px);
                }
                &.log-animate-leave-active {
                    position: absolute;
                }
            }
        }
    }
</style>
